import { Modal, Form, Input, Select, Radio, Switch } from 'antd'
import { menuAdd, menuInfo, menuEdit } from '../../request/api'
import { useState, useImperativeHandle, forwardRef } from 'react'
const { Option } = Select
const App = forwardRef((props, ref) => {
  const handleOk = () => {
    form.submit()
  }

  const handleCancel = () => {
    reset()
  }

  const onFinish = values => {
    console.log(values, 123213123)
    if (props.isAdd) {
      // 调用添加接口
      menuAdd({
        ...values,
        status: values.status ? 1 : 2
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          // 重新渲染
          props.getList()
          reset()
        }
      })
    } else {
      // 调用编辑接口
      menuEdit({
        ...values,
        status: values.status ? 1 : 2,
        id: editId
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          // 重新渲染
          props.getList()
          reset()
        }
      })
    }
  }
  const [editId, setEditId] = useState(0)
  //单选框的初始值
  const [value, setValue] = useState(1)
  //单选框的change事件
  const onChange = e => {
    setValue(e.target.value)
  }
  //封装一个函数回显事件
  const lookup = id => {
    setEditId(id)
    //调取获取一条数据接口
    menuInfo({ id }).then(res => {
      console.log(res)
      if (res.code == 200) {
        form.setFieldsValue(res.list)
      }
    })
  }
  //暴露 ref 方法
  useImperativeHandle(ref, () => ({
    lookup
  }))
  const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo)
  }
  const [form] = Form.useForm()
  //封装一个重置事件
  const reset = () => {
    props.cancel()
    form.resetFields()
  }
  return (
    <div>
      <Modal
        title={props.isAdd ? '菜单添加' : '菜单编辑'}
        visible={props.isShow}
        onOk={handleOk}
        onCancel={handleCancel}
        cancelText='取消'
        okText='确认'
      >
        <Form
          form={form}
          name='basic'
          labelCol={{
            span: 6
          }}
          wrapperCol={{
            span: 15
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete='off'
        >
          <Form.Item
            label='菜单名称'
            name='title'
            rules={[
              {
                required: true,
                message: '请输入菜单名称!'
              }
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label='上级菜单'
            name='pid'
            rules={[
              {
                required: true,
                message: '请输入上级菜单!'
              }
            ]}
          >
            <Select placeholder='请选择上级菜单' allowClear>
              <Option value={0}>顶级菜单</Option>
              {props.menuData.map(item => (
                <Option key={item.id} value={item.id}>
                  {item.title}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item label='菜单类型' name='type' initialValue={value}>
            <Radio.Group value={value} onChange={onChange}>
              <Radio value={1}>目录</Radio>
              <Radio value={2}>菜单</Radio>
            </Radio.Group>
          </Form.Item>
          {value == 1 ? (
            <Form.Item name='icon' label='图标'>
              <Input />
            </Form.Item>
          ) : (
            <Form.Item name='url' label='地址'>
              <Input />
            </Form.Item>
          )}
          <Form.Item label='状态' name='status' valuePropName='checked'>
            <Switch />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
})
export default App
